<!--
 * @Author: 罗天真
 * @Description: 轮播图配置组件，C端由van-swipe实现轮播
-->
<template>
  <div class="slide-editor box-card">
    <editor-panel title="轮播图属性">
      <div>
        <el-row class="style-row">
          <el-col :span="4">
            <span class="upload_type_txt">样式</span>
          </el-col>
          <el-radio-group v-model="radio" @change="changeRadio">
            <el-radio :label="1">
              拉通样式
            </el-radio>
            <el-radio :label="2">
              卡片样式
            </el-radio>
          </el-radio-group>
        </el-row>
        <el-row
          v-for="item in fragments"
          :key="item.id"
          class="image-row"
          type="flex"
          align="center"
          :gutter="10"
        >
          <el-col :span="5">
            <div class="upload_fragment_index">
              第{{ item.id }}帧
            </div>
          </el-col>
          <el-col :span="4">
            <div class="image-upload-block">
              <image-upload
                v-model="item.imageUrl"
                @input="updateList"
              />
            </div>
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="item.linkUrl"
              style="margin-left: 5px"
              size="medium"
              @blur="updateList"
            />
          </el-col>
          <el-col
            :span="3"
            class="hide"
            :class="{ active: item.imageUrl !== '' }"
          >
            <el-button type="text" @click="deleteItem(item.id)">
              清除
            </el-button>
          </el-col>
        </el-row>
      </div>
    </editor-panel>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import ImageUpload from '@/components/properties/common/ImageUpload'
import EditorPanel from '@/components/properties/common/EditorPanel'
import tool from '@/util/tool'
export default {
  components: {
    ImageUpload,
    EditorPanel
  },
  data () {
    return {
      radio: 1,
      fragments: [
        {
          id: 1,
          imageUrl: '',
          linkUrl: ''
        },
        {
          id: 2,
          imageUrl: '',
          linkUrl: ''
        },
        {
          id: 3,
          imageUrl: '',
          linkUrl: ''
        },
        {
          id: 4,
          imageUrl: '',
          linkUrl: ''
        },
        {
          id: 5,
          imageUrl: '',
          linkUrl: ''
        }
      ]
    }
  },
  computed: {
    ...mapGetters('main', ['selectedComponent', 'pageContent'])
  },
  mounted () {
    this.setComponentDefault()
  },
  methods: {
    ...mapMutations('main', ['editComponent']),
    ...mapMutations('step', ['stepsAdd1', 'stepLock']),
    setComponentDefault() {
      if (this.selectedComponent.list.length === 0) {
        this.updateComponentData('list', this.getDefaultImageList())
      }
      this.fragments.forEach(item => {
        let current = this.selectedComponent.list.find(i => i.id === item.id)
        if (current && !current.defalut) {
          item.imageUrl = current.imageUrl
          item.linkUrl = current.linkUrl
        } else {
          item.imageUrl = ''
          item.linkUrl = ''
        }
      })
      this.setRadio()
    },
    updateComponentData(field, value) {
      const data = {
        _id: this.selectedComponent._id,
        field: field,
        value: tool.deepCopy(value)
      }
      this.editComponent(data)
    },
    deleteItem (id) {
      const item = this.fragments.find(per => per.id === id)
      if (item) {
        item.imageUrl = ''
        item.linkUrl = ''
        this.updateList()
      }
    },
    updateList() {
      let valueList = this.fragments.filter(per => per.imageUrl)
      if (valueList.length === 0) {
        valueList = this.getDefaultImageList()
      }
      this.updateComponentData('list', valueList)
    },
    pushStep: tool.debounce(function () {
      this.stepsAdd1(this.pageContent)
    }, 500),
    changeRadio () {
      this.updateComponentData('status', this.radio)
      this.pushStep()
    },
    setRadio () {
      this.radio = Number(this.selectedComponent.status)
    },
    getDefaultImageList () {
      return [
        {
          defalut: true,
          imageUrl: require('@/assets/image/swipe_place_hold.png'),
          linkUrl: '',
          id: 1
        },
        {
          defalut: true,
          imageUrl: require('@/assets/image/swipe_place_hold.png'),
          linkUrl: '',
          id: 2
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.slide-editor {
  overflow: auto;
  // width: 400px;
  float: right;
  background: rgba(235, 239, 245, 1);
  .el-card {
    border: 0 !important;
    float: right;
    width: 400px;
  }
  .el-card__header {
    background-color: #f5f7fa !important;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    color: #409eff;
    border: 0;
    i {
      margin-left: 205px;
      font-size: 16px;
    }
  }
  .el-card__body {
    padding: 15px;
  }
  .upload_fragment_index {
    display: inline-block;
    height: 36px;
    font-size: 16px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(121, 126, 135, 1);
    line-height: 36px;
  }
  .style-row {
    height: 45px;
    line-height: 45px;
    display: flex;
    align-items: center;
  }
  .image-row {
    display: flex;
    align-items: center;
    margin: 10px 0px;
    .image-upload-block {
      width: 42.5px;
      height: 42.5px;
    }
  }
  .upload_type_txt {
    display: inline-block;
    // width: 30px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(121, 126, 135, 1);
    line-height: 17px;
  }
  .hide {
    display: none;
  }
  .active {
    display: block;
  }
}
</style>
